/* 登录注册页面 */
.login-register-page {
    min-height: var(--page-min-h);
}

/* 登录注册页面中的扇形(圆，只显示部分) */
/* 该元素层级比表单高，为了移动时可以遮挡表单 */
/* 
    定位如何处理球的位置：
    此时我们要在页面中展示球的右下和左下部分，且后面我们希望通过水平移动实现页面动画，
    同时还希望定位能正数百分比，因此选页面的右上作为基准，通过垂直平移将球的水平
    直径定在页面上边(因为球可能大于页面，所以球初始要在页面上边下面，才可以通过垂直水平
    移动球自身的 50% 将球的水平直径定在页面上边)，这样我们就可以通过平移利用球的右下和
    左下部分
    （其他同理）
*/
.login-register-page::before {
    /* 圆的直径 */
    /* --circle-diameter: calc(100vh * 1.05 * 2); */
    --circle-diameter: 2500px;
    content: '';
    position: absolute;
    right: 55%;
    top: 5%;
    transform: translateY(-50%);
    z-index: 6;
    width: var(--circle-diameter);
    height: var(--circle-diameter);
    border-radius: 50%;
    background: var(--bg-circle-c);
    transition: 1.8s ease-in-out;
}

/* 登录注册页面中的表单 */
/* 将表单设置为一个只有一格的 grid 容器，然后将登录和注册表单放置在同一格中，实现不脱标又可重叠 */
.login-register-page__form-container__form {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 5;
    width: 50%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    transition: 1s ease-in-out;
    transition-delay: .6s;
}

/* 表单 */
.form {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    transition: opacity .75s ease-in-out;
    transition-delay: .6s;
}

/* 登录表单 */
/* pointer-events 用于控制容器可以成为那些鼠标事件的目标，由于两个表单重叠，所以需要进行该控制 */
.login-form {
    opacity: 1;
    pointer-events: all;
}

/* 注册表单 */
.register-form {
    opacity: 0;
    pointer-events: none;
}

/* 页面中的面板容器 */
.login-register-page__panel-container {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
}

/* 面板 */
/* 控制面板的层级，而不是整个面板容器，防止遮挡表单 */
.panel {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-end;
    z-index: 7;
    transition: transform .9s ease-in-out;
    transition-delay: .3s;
}

/* 左面板 */
.left-panel {
    padding: 3rem 17% 2rem 12%;
    transform: translateX(0);
}

/* 右面板 */
/* 默认整个移出页面，否则遮挡表单 */
.right-panel {
    padding: 3rem 12% 2rem 17%;
    transform: translateX(100%);
}

/*************************** 注册模式 ***************************/
/* 登录注册页面中的扇形 */
.login-register-page.register-mode::before {
    right: 50%;
    transform: translate(100%, -50%);
}

/* 登录注册页面中的表单 */
.login-register-page.register-mode .login-register-page__form-container__form {
    right: 50%;
}

/* 登录表单 */
.login-register-page.register-mode .login-form {
    opacity: 0;
}

/* 注册表单 */
.login-register-page.register-mode .register-form {
    opacity: 1;
}

/* 左面板  */
.login-register-page.register-mode .left-panel {
    transform: translateX(-100%);
}

/* 右面板  */
.login-register-page.register-mode .right-panel {
    transform: translateX(0);
}

/* 当屏幕宽小于等于 815px 时的样式 */
@media screen and (max-width: 875px) {

    /* 登录注册页面中的扇形 */
    .login-register-page::before {
        --circle-diameter: 1500px;
        top: initial;
        right: initial;
        left: 30%;
        bottom: 80%;
        transform: translateX(-50%);
    }

    /* 登录注册页面中的表单 */
    .login-register-page__form-container__form {
        top: 50%;
        right: 0;
        transform: translateY(-25%);
        width: 100%;
    }

    /* 页面中的面板容器 */
    .login-register-page__panel-container {
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 2fr 1fr;
    }

    /* 面板 */
    .panel {
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
    }

    /* 左面板 */
    .left-panel {
        padding: 1rem 17% 1rem 12%;
        grid-row: 1 / 2;
    }

    /* 右面板 */
    .right-panel {
        padding: 1rem 12% 1rem 17%;
        grid-row: 3 / 4;
    }

    /* 面板中的图片 */
    .panel .img-box {
        width: var(--panel-img-m-w);
    }

    /*************************** 注册模式 ***************************/
    /* 登录注册页面中的扇形 */
    .login-register-page.register-mode::before {
        bottom: 22%;
        transform: translate(-50%, 100%);
    }

    /* 登录注册页面中的表单 */
    .login-register-page.register-mode .login-register-page__form-container__form {
        top: 0;
        right: 0;
        transform: translateY(25%);
        width: 100%;
    }
}

/* 当屏幕宽小于等于 600px 时的样式 */
@media screen and (max-width: 600px) {

    /* 登录注册页面中的扇形 */
    .login-register-page::before {
        left: 50%;
        bottom: 80%;
        transform: translateX(-50%);
    }

    /* 登录注册页面中的表单 */
    .login-register-page__form-container__form {
        transform: translateY(-35%);
        box-sizing: border-box;
        padding: 0 1rem;
    }

    /* 面板 */
    .panel {
        transition-delay: .5s;
    }

    /* 面板 */
    .panel,
    .panel .content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    /* 左面板 */
    .left-panel {
        transform: translateY(0);
    }

    /* 右面板 */
    .right-panel {
        transform: translateY(100%);
    }

    /*************************** 注册模式 ***************************/
    /* 登录注册页面中的扇形 */
    .login-register-page.register-mode::before {
        bottom: 36%;
        transform: translate(-50%, 100%);
    }

    /* 登录注册页面中的表单 */
    .login-register-page.register-mode .login-register-page__form-container__form {
        transform: translateY(10%);
    }

    /* 左面板  */
    .login-register-page.register-mode .left-panel {
        transform: translateY(-100%);
    }

    /* 右面板  */
    .login-register-page.register-mode .right-panel {
        transform: translateY(0);
    }
}